<template>
  <div class="check-task">
    <div>
      <eagle-image-uploader
        :images.sync="data.Attachs"
        class="m-10"
      ></eagle-image-uploader>
      <div class="up-part">
        <div>
          <div>
            <van-field
              class="input_text"
              label="隐患区域"
              readonly
              input-align="right"
            >
              <template #input>
                <div
                  style="display: flex; color: #1296db"
                  v-if="!data.IsAssignedArea"
                  @click="showDangerAreaDialog = true"
                >
                  <img
                    src="@/assets/Images/AppIcon/icon_danger_select.png"
                    alt=""
                    style="height: 20px; width: 20px"
                  />
                  选择隐患区域
                </div>
              </template>
            </van-field>
          </div>
          <van-field
            v-model="data.HiddenDangerArea"
            :readonly="data.IsAssignedArea || !data.DangerCustomArea"
          />
        </div>
        <div>
          <div>
            <van-field
              class="input_text"
              label="隐患描述"
              required
              input-align="right"
            >
              <template #input>
                <div></div>
              </template>
            </van-field>
          </div>
          <van-field
            v-model="data.HiddenDangerDesc"
            rows="3"
            autosize
            type="textarea"
          />
        </div>
        <div>
          <div>
            <van-field
              class="input_text"
              label="整改建议"
              input-align="right"
            >
              <template #input>
                <div
                  style="display: flex; color: #1296db"
                  @click="_goClassifys()"
                >
                  <img
                    src="@/assets/Images/AppIcon/icon_danger_select.png"
                    alt=""
                    style="height: 20px; width: 20px"
                  />
                  从依据库选择
                </div>
              </template>
            </van-field>
          </div>
          <van-field
            v-model="data.CorrectiveAdvise"
            rows="3"
            autosize
            type="textarea"
          />
          <div
            v-if="data.GistSource"
            class="warning gist-source"
          >
            依据来源：{{ data.GistSource }}
          </div>
        </div>
      </div>
      <template>
        <div class="down-part">
          <van-field
            class="input_text"
            v-model="lgdFullName"
            label="隐患分类"
            placeholder="请选择"
            required
            readonly
            @click="showDangerTypeDialog = true"
          >
            <template #right-icon>
              <van-icon name="arrow" />
            </template>
          </van-field>
          <!-- 单选框 -->
          <van-field
            class="input_text"
            name="radio"
            label="隐患性质"
            required
          >
            <template #input>
              <van-radio-group
                v-model="data.HiddenDangerType"
                direction="horizontal"
              >
                <van-radio
                  name="1"
                  style="margin: 0 10px 10px 0"
                >一般隐患</van-radio>

                <van-radio
                  name="2"
                  style="margin: 0 10px 10px 0"
                >重大隐患</van-radio>
              </van-radio-group>
            </template>
          </van-field>

          <van-field
            class="input_text"
            :value="correctiveFullName"
            :label="labelCorrectiveDeptUserName"
            placeholder="请选择"
            required
            readonly
            @click="showDeptUser()"
          >
            <template #right-icon>
              <van-icon name="arrow" />
            </template>
          </van-field>
          <date-picker
            label="整改期限"
            labelWidth:96
            :required="data.IsMustSubCorrectiveDate"
            showFastSelect="true"
            :date.sync="data.CorrectiveDate"
          ></date-picker>
        </div>
      </template>
      <van-field
        v-if="this.data.Status == 15"
        class="input_text"
        label="退回原因"
        placeholder="暂无"
        readonly
        v-model="data.Remarks"
      >
      </van-field>
      <div
        class="det_tab_item"
        style="margin-top: 10px"
        v-if="this.data.Status == 20"
      >
        <div class="operate_det">
          <div style="margin-bottom: 10px">操作历史记录</div>
          <div class="operate_list">
            <van-row class="operate_row_first">
              <van-col span="4">序号</van-col>
              <van-col
                offset="1"
                span="10"
              >操作</van-col>
            </van-row>
            <van-row
              v-for="(item, index) in this.data.LogList"
              :key="index"
              class="operate_row"
            >
              <van-col span="4">{{ index + 1 }}</van-col>
              <van-col
                offset="1"
                span="18"
              >{{ item.OperateLog }}
                <div v-if="item.Attachs">
                  <eagle-image-preview :images="item.Attachs">
                  </eagle-image-preview>
                </div>
              </van-col>
            </van-row>
          </div>
        </div>
      </div>
      <template v-if="
          roles.indexOf('admin') != -1 &&
          this.data.OriginType == 3 &&
          !this.data.ID
        ">
        <div class="bottom-btns">
          <van-button
            class="submit-btn"
            type="primary"
            @click="save(false, 'close')"
          >
            暂存并关闭
          </van-button>
          <van-button
            type="info"
            class="submit-btn"
            @click="save(false, 'info')"
          >
            暂存并继续
          </van-button>
        </div>
        <div class="bottom-btns">
          <van-button
            type="warning"
            class="delete-btn"
            @click="save(true, 'pust')"
          >
            提交至整改部门/人
          </van-button>
        </div>
      </template>
      <template v-else-if="roles.indexOf('admin') != -1 && this.data.Status == 20">
        <div class="bottom-btns">
          <van-button
            type="primary"
            class="submit-btn"
            @click="save(true, 'pust')"
          >
            确认
          </van-button>
          <van-button
            class="submit-btn ml-10"
            type="info"
            @click="save(false)"
          >
            暂存
          </van-button>
          <van-button
            type="warning"
            class="submit-btn ml-10"
            @click="backHiddenDanger()"
          >
            退回
          </van-button>
        </div>
      </template>
      <template>
        <div class="bottom-btns">
          <van-button
            type="primary"
            class="submit-btn"
            @click="save(true, 'pust')"
          >
            提交至整改部门/人
          </van-button>
          <van-button
            class="submit-btn"
            type="info"
            @click="save(false, 'close')"
          >
            暂存
          </van-button>
        </div>
      </template>
      <!-- <template v-else>
        <div class="bottom-btns">
          <van-button
            type="primary"
            class="delete-btn"
            @click="save(true, 'pust')"
          >
            提交至管理员
          </van-button>
        </div>
      </template> -->
      <template v-if="this.data.ID && this.data.Status < 20">
        <div class="bottom-btns">
          <van-button
            type="warning"
            class="delete-btn"
            @click="handleDelete()"
          >
            删除
          </van-button>
        </div>
      </template>
    </div>
    <!-- 隐患区域 -->
    <danger-area-dialog
      :show.sync="showDangerAreaDialog"
      @callback="onDangerAreaCallback"
    ></danger-area-dialog>
    <!-- 隐患分类 -->
    <danger-type-dialog
      :show.sync="showDangerTypeDialog"
      @callback="onDangerTypeCallback"
    ></danger-type-dialog>
    <!-- 部门，人 -->
    <department-and-user-dialog
      :show.sync="showDepartmentAndUserDialog"
      @callback="onUserCallback"
    ></department-and-user-dialog>

    <user-choose-dialog
      @callback="onUserCallback"
      :show.sync="showUserChooseDialog"
    >
    </user-choose-dialog>

    <!-- 检查依据 -->
    <van-popup
      v-model="ClassifysShow"
      closeable
      round
      position="bottom"
      :style="{ height: '80%' }"
    >
      <div class="popup-title">选择依据</div>
      <div class="popup-content">
        <Classifys
          @ClassifysCb="_chooseClassifys"
          :isShow="isShow"
        />
      </div>
    </van-popup>

    <BackHiddenDialog
      :show="showBackDialog"
      :id="this.data.ID"
      @cb="onBack"
    />
  </div>
</template>


<script>
import {
  initNewEntity,
  SnapShotAdd,
  getDangerDetail,
} from "@/api/dangerCheckTaskDetail";
import {
  handleDelete,
  SaveHiddenDanger,
  SaveDetail,
} from "@/api/dangerCheckTaskDetail";
import { mapGetters } from "vuex";
import Classifys from "@/components/Classifys/Classifys.vue";
import store from "@/store/index";
import { Dialog } from "vant";
import BackHiddenDialog from "@/views/Otherdanger/OtherdangerCheckTaskDetail/components/BackHiddenDanger";
import DangerTypeDialog from "@/views/danger/dangerCheckTaskDetail/components/DangerTypeDialog.vue";
import DangerAreaDialog from "@/views/danger/dangerCheckTaskDetail/components/DangerAreaDialog.vue";
import DepartmentAndUserDialog from "@/views/components/department/departmentUserChooseDialog.vue";
import UserChooseDialog from "@/views/components/user/userChooseDialog.vue";
export default {
  components: {
    Classifys,
    BackHiddenDialog,
    DangerTypeDialog,
    DangerAreaDialog,
    DepartmentAndUserDialog,
    UserChooseDialog,
  },
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      data: {
        OriginType: this.$route.query.originType || 3,
        LogList: [],
        DangerSimpleType: false,
      },
      id: "",
      ClassifysShow: false,
      isShow: false,
      showBackDialog: false,
      showDangerAreaDialog: false,
      showDangerTypeDialog: false,
      showDepartmentAndUserDialog: false,
      showUserChooseDialog: false,
    };
  },
  computed: {
    ...mapGetters(["CompanyCode", "roles"]),
    lgdFullName: {
      get() {
        if (this.data.LGDType != null && this.data.LGDName != null) {
          return (
            (this.data.LGDType == "1" ? "基础管理" : "现场管理") +
            ">" +
            this.data.LGDName
          );
        }
        return "";
      },
    },
    correctiveFullName: {
      get: function () {
        if (this.data.CorrectiveDeptCode) {
          if (this.data.CorrectiveUserName) {
            return (
              this.data.CorrectiveDeptName + "-" + this.data.CorrectiveChnName
            );
          } else {
            return this.data.CorrectiveDeptName;
          }
        } else {
          return this.data.CorrectiveChnName;
        }
      },
      set: function (item) {
        if (item) {
          if (this.isSimple) {
            this.data.CorrectiveChnName = item[0].name || "";
            this.data.CorrectiveUserName = item[0].code || "";
            this.data.CorrectiveDeptName = "";
            this.data.CorrectiveDeptCode = "";
          } else {
            this.data.CorrectiveDeptName = item.OrgName || "";
            this.data.CorrectiveDeptCode = item.OrgCode || "";
            this.data.CorrectiveChnName = item.ChnName || "";
            this.data.CorrectiveUserName = item.UserName || "";
          }
        }
      },
    },
    isManager: {
      get() {
        return (
          this.roles.indexOf("admin") != -1 || this.data.DangerSimpleType == "A"
        );
      },
    },
    isSimple: {
      get() {
        return this.data.DangerSimpleType == "A";
      },
    },
    labelCorrectiveDeptUserName: {
      get() {
        return this.isSimple == true ? "整改人" : "整改部门/人";
      },
    },
  },
  created() {
    if (this.$route.query.ctCode) {
      this.ctCode = this.$route.query.ctCode || "";
    }
    this.data.ID = this.$route.query.id || 0;
    this.data.OriginType = this.$route.query.originType || 3;
    if (!this.data.ID) {
      this.initNewEntity();
    } else {
      this.getDangerDetail();
    }
  },
  methods: {
    exit_dialog() {
      //关闭弹窗
      this.isShow = false;
    },
    showDeptUser() {
      if (this.isSimple) {
        this.showUserChooseDialog = true;
      } else {
        this.showDepartmentAndUserDialog = true;
      }
    },
    calcTitle() {
      let originType = this.data.OriginType;
      let id = this.data.ID;
      let title = "新增随手拍";
      if (this.data.Status == 20) {
        title = "隐患确认";
      } else if (originType == 3) {
        if (id > 0) {
          title = "随手拍编辑";
        }
      } else if (originType == 2) {
        if (id > 0) {
          title = "依据检查编辑";
        } else {
          title = "新增依据检查";
        }
      } else if (originType == 1) {
        if (id > 0) {
          title = "检查表检查编辑";
        }
      }
      store.commit("updateTitle", title);
    },
    // 计划详情
    initNewEntity() {
      var me = this;
      const param = {
        id: 0,
        ctCode: this.ctCode || "",
        OriginType: this.data.OriginType,
      };
      initNewEntity(param).then((res) => {
        this.data = res.data;
        this.IsManager = this.IsManager || this.data.DangerSimpleType;
        this.data.HiddenDangerType = "1";
        if (this.$route.params.file) {
          this.data.Attachs = this.$route.params.file;
        }
        if (this.$route.params.vobj) {
          this.data.CorrectiveAdvise = this.$route.params.vobj.CorrectiveAdvise;
          this.data.HiddenDangerDesc = this.$route.params.vobj.HiddenDangerDesc;
          this.data.OriginType = 2;
          this.data.LGDName = this.$route.params.vobj.DName;
          this.data.LGDCode = this.$route.params.vobj.DCode;
          this.data.OriginalText = this.$route.params.vobj.OriginalText;
          this.data.GistSource = this.$route.params.vobj.GistSource;
          this.data.LGCode = this.$route.params.vobj.LGCode;
          this.data.LegalLiability = this.$route.params.vobj.LegalLiability;
          this.data.HiddenDangerAreaType =
            this.$route.params.vobj.HiddenDangerType;
          this.data.LGDType = this.$route.params.vobj.DType;
        }
        // 设备发起检查
        if (this.$route.query.areaName) {
          this.data.HiddenDangerArea = this.$route.query.areaName;
          this.data.HiddenDangerAreaType = this.$route.query.areaType;
          this.data.HiddenDangerAreaCode = this.$route.query.areaCode;
          this.data.HiddenDangerAreaNo = this.$route.query.areaNo;
          this.data.IsAssignedArea = true;
        }
        this.calcTitle();
      });
    },
    getDangerDetail() {
      const param = {
        id: this.data.ID,
      };
      getDangerDetail(param).then((res) => {
        this.data = res.data;

        this.calcTitle();
      });
    },
    onDateCallback(date) {
      this.data.CorrectiveDate = date;
    },
    // 点击保存
    save(Confirm, info) {
      // return this.$toast("请上传图片!"+info);
      if (!this.data.Attachs && this.data.OriginType == 3) {
        return this.$toast("随手拍必须选择隐患图片!");
      }
      if (info == "pust") {
        if (!this.data.HiddenDangerDesc) {
          return this.$toast("提交检查记录必须输入隐患描述");
        }
        if (this.roles.indexOf("admin") != -1) {
          if (!this.data.CorrectiveDeptCode && !this.data.CorrectiveUserName) {
            return this.$toast("提交检查记录必须选择整改部门/人");
          }
          if (!this.data.LGDName) {
            return this.$toast("提交检查记录必须选择隐患分类");
          }
          if (this.data.IsMustSubCorrectiveDate) {
            if (!this.data.CorrectiveDate) {
              return this.$toast("请选择整改期限");
            }
          }
        }
      }
      this.loading = true;
      let form = {
        ID: this.data.ID,
        OriginType: this.data.OriginType || 3,
        CompanyCode: this.CompanyCode,
        IsAssignedArea: this.data.IsAssignedArea,
        HiddenDangerDesc: this.data.HiddenDangerDesc,
        CorrectiveAdvise: this.data.CorrectiveAdvise,
        HiddenDangerArea: this.data.HiddenDangerArea,
        HiddenDangerAreaType: this.data.HiddenDangerAreaType,
        HiddenDangerAreaCode: this.data.HiddenDangerAreaCode,
        Attachs: this.data.Attachs,
        HiddenDangerType: this.data.HiddenDangerType,
        LegalLiability: this.data.LegalLiability,
        OriginalText: this.data.OriginalText,
        LGCode: this.data.LGCode,
        LGDCode: this.data.LGDCode,
        LGDName: this.data.LGDName,
        LGDType: this.data.LGDType,
        CorrectiveUserName: this.data.CorrectiveUserName,
        CorrectiveChnName: this.data.CorrectiveChnName,
        CorrectiveDeptCode: this.data.CorrectiveDeptCode,
        CorrectiveDeptName: this.data.CorrectiveDeptName,
        GistSource: this.data.GistSource,
        CorrectiveDate: this.data.CorrectiveDate,
        Submit: Confirm,
      };
      // 检查任务详情
      if (this.ctCode) {
        form.CTCode = this.ctCode;
        form.CompanyCode = this.data.CompanyCode;
      }
      if (!this.data.ID) {
        let originType = this.data.OriginType;
        SnapShotAdd(form, Confirm)
          .then((res) => {
            this.loading = false;
            if (info == "info") {
              this.data.ID = 0;
              this.data.Attachs = null;
              this.data.OriginType = originType;
              this.data.CorrectiveAdvise = null;
              this.data.HiddenDangerDesc = null;
              this.data.LGDCode = null;
              this.data.LGDName = null;
              this.data.LGDType = null;
              this.data.LGCode = null;
              this.data.LegalLiability = null;
              this.data.OriginalText = null;
              this.data.GistSource = null;
              this.data.CorrectiveDeptName = null;
              this.data.CorrectiveDeptCode = null;
              this.data.CorrectiveChnName = null;
              this.data.CorrectiveUserName = null;
              this.data.HiddenDangerType = "1";
              return;
            }
            setTimeout(() => {
              this.$router.goRefresh(-1);
            }, 500);
          })
          .catch((err) => {
            console.log("err", err);
          });
      } else {
        if (this.data.Status == 20) {
          SaveHiddenDanger(form, Confirm)
            .then((res) => {
              this.loading = false;
              setTimeout(() => {
                this.$router.goRefresh(-1);
              }, 500);
            })
            .catch((err) => {
              console.log("err", err);
            });
        } else {
          SaveDetail(form, Confirm)
            .then((res) => {
              this.loading = false;
              setTimeout(() => {
                this.$router.goRefresh(-1);
              }, 500);
            })
            .catch((err) => {
              console.log("err", err);
            });
        }
      }
    },
    handleDelete() {
      Dialog.confirm({
        title: "询问",
        message: "确定要删除该条记录吗?",
      })
        .then(() => {
          handleDelete({ id: this.data.ID }).then((res) => {
            this.$toast.success("删除成功！");
            setTimeout(() => {
            this.$router.goRefresh(-1);
          }, 500);
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    // 隐患分类回调
    onDangerAreaCallback(item) {
      if (item) {
        this.$set(this.data, "HiddenDangerArea", item.AreaName);
        this.data.HiddenDangerAreaCode = item.AreaCode;
        this.data.HiddenDangerAreaName = item.AreaName;
        this.data.HiddenDangerAreaType = item.AreaType;
        this.showDangerAreaDialog = false;
      }
    },
    // 隐患分类回调
    onDangerTypeCallback(item) {
      if (item) {
        this.data.LGDCode = item.DCode;
        this.data.LGDName = item.DName;
        this.data.LGDType = item.DType;
        this.showDangerTypeDialog = false;
      }
    },
    // 选择部门人回调
    onUserCallback(item) {
      this.correctiveFullName = item.ChnName;
      this.showDepartmentAndUserDialog = false;
      this.showUserChooseDialog = false;
    },

    // 检查依据
    _goClassifys() {
      this.ClassifysShow = true;
      this.isShow = false;
    },

    // 选择检查依据
    _chooseClassifys(classifysData, isShow) {
      // 依据库
      if (classifysData) {
        this.$set(
          this.data,
          "CorrectiveAdvise",
          classifysData.CorrectiveAdvise
        );
        this.data.HiddenDangerType = classifysData.HiddenDangerType;
        this.data.LGDName = classifysData.DName;
        this.data.LGDCode = classifysData.DCode;
        this.data.LGDType = classifysData.DType;
        this.data.LGCode = classifysData.LGCode;
        this.data.GistSource = classifysData.GistSource;
        this.data.OriginalText = classifysData.OriginalText;
        this.data.LegalLiability = classifysData.LegalLiability;
        if (!this.data.HiddenDangerDesc) {
          this.$set(
            this.data,
            "HiddenDangerDesc",
            classifysData.HiddenDangerDesc
          );
        } else {
          Dialog.confirm({
            confirmButtonText: "覆盖",
            cancelButtonText: "不覆盖",
            message: "当前已经输入隐患描述，是否覆盖?",
          })
            .then(() => {
              // on confirm
              this.$set(
                this.data,
                "HiddenDangerDesc",
                classifysData.HiddenDangerDesc
              );
              // this.data.HiddenDangerDesc = this.$route.params.classifysData.HiddenDangerDesc
            })
            .catch(() => {
              // on cancel
            });
        }
        this.ClassifysShow = false;
      }
      if (isShow) {
        this.isShow = true;
      } else {
        this.isShow = false;
      }
    },
    backHiddenDanger() {
      this.showBackDialog = true;
    },
    onBack(result) {
      if (result) {
        this.$toast("退回成功");
        setTimeout(() => {
          this.$router.goRefresh(-1);
        }, 500);
      }
      this.showBackDialog = false;
    },
  },
};
</script>

<style lang="less" scoped>
.check-task {
  background-color: #e8f1f8;
  padding-bottom: 20px;
}
.problem {
  margin-bottom: 10px;
}
.bottom-btns {
  margin-top: 10px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .submit-btn {
    width: 48%;
    height: 35px;
    font-size: 14px;
  }
  .delete-btn {
    width: 100%;
    height: 35px;
    font-size: 14px;
  }
}
.warning {
  background-color: #fff;
  padding: 10px;
  font-size: 10px;
}

.det_tab_item {
  padding: 10px 0;
  background-color: #fff;
  border-radius: 5px;
  margin-bottom: 10px;

  .det_tab_item_text {
    padding: 0 10px;
  }
}
.operate_det {
  background-color: #fff;
  padding: 10px;
  .operate_list {
    font-size: 12px;
    border: 1px solid #e8f1f8;
    .operate_row_first {
      padding: 10px;
      background-color: #e8f1f8;
      border-bottom: 1px solid #e8f1f8;
      margin-bottom: 10px;
    }
    .operate_row {
      padding: 10px;
      border-bottom: 1px solid #e8f1f8;
      line-height: 16px;
    }
  }
}
.week {
  color: rgb(0, 195, 224);
}
</style>
